<template>
    <div>
        <div class="loan_nav">
			<ul>
				<li><a href="javascript:history.go(-1)"><i class="iconfont">&#xe61e;</i></a></li>
				<li><p>提前还贷计算</p></li>
				<li></li>
			</ul>
		</div>
		<div class="interval_T">
			
		</div>
		<div>
			<img src="@/assets/img/2e0e9be4aa926395ea893308a325e811.jpg"  width="100%"/>
		</div>
        <div class="business_ipt">
             <ul>
                <li>
                    <input type="text" placeholder="贷款总额">
                </li>
                <li>
                    <p>万元</p>
                </li>
            </ul>
            <ul>
                <li>
                    <input type="text" placeholder="贷款总额">
                </li>
                <li>
                    <p>万元</p>
                </li>
            </ul>
            <ul>
                <li>
                    <input type="text" placeholder="贷款总额">
                </li>
                <li>
                    <p>万元</p>
                </li>
            </ul>
             <ul>
                <li>
                    <select>
                        <option value ="volvo">原贷款期限</option>
                        <option value ="saab">1年</option>
                        <option value ="saab">10年</option>
                        <option value ="saab">20年</option>
                    </select>
                </li>
                <li>
                    <i class="iconfont">&#xe710;</i>
                </li>
            </ul>
            <ul>
                <li>
                    <select>
                        <option value ="volvo">等额本息</option>
                        <option value ="saab">等额本金</option>
                    </select>
                </li>
                <li>
                    <i class="iconfont">&#xe710;</i>
                </li>
            </ul>
            <ul>
                <li>
                    <input type="text" placeholder="商业贷款月息">
                </li>
                <li>
                    <p>厘</p>
                </li>
            </ul>
            <ul>
                <li>
                    <input type="text" placeholder="提前还款金额（选部分还款必填）">
                </li>
                <li>
                    <p>万元</p>
                </li>
            </ul>
        </div>
        <div class="repaying_text">
            
            <checklist :options="commonList" :max="1" @on-change="change" v-model="radioValue">

            </checklist>
        </div>
        <div class="repaying_type">
            <p>处理方式:</p>
        </div>
        <div class="repaying_text">
            
            <checklist :options="commonList1" :max="1" @on-change="change" v-model="radioValueT">

            </checklist>
        </div>
        <div class="business_btn">
            <ul>
                <li>
                    <input type="button" class="Calculation" value="开始计算">
                </li>
                <li>
                    <input type="button" class="Reset" value="重置">
                </li>
            </ul>
        </div>
        <div class="business_title">
            <p>计算结果:</p>
        </div>
        <div class="business_result">
             <ul>
                 <li>
                     <p>
                         原月还款额
                     </p>
                 </li>
                <li>
                    <input type="text" readonly>
                </li>
                <li>
                    <p>元</p>
                </li>
            </ul>
            <ul>
                <li>
                    <p>
                         原最后还款期
                     </p>
                </li>
                <li>
                    <input type="text" readonly>
                </li>
                <li>
                    <!-- <p>元</p> -->
                </li>
            </ul>
            <ul>
                <li>
                    <p>
                         已还款总额
                     </p>
                </li>
                <li>
                    <input type="text"  readonly>
                </li>
                <li>
                    <p>元</p>
                </li>
            </ul>
            <ul>
                <li>
                    <p>
                         已还利息额
                     </p>
                </li>
                <li>
                    <input type="text"  readonly>
                </li>
                <li>
                    <p>元</p>
                </li>
            </ul>
            <ul>
                <li>
                    <p>
                         该月一次还款额
                     </p>
                </li>
                <li>
                    <input type="text"  readonly>
                </li>
                <li>
                    <p>元</p>
                </li>
            </ul>
            <ul>
                <li>
                    <p>
                         下月起月还款额
                     </p>
                </li>
                <li>
                    <input type="text"  readonly>
                </li>
                <li>
                    <p>元</p>
                </li>
            </ul>
            <ul>
                <li>
                    <p>
                         节省利息支出
                     </p>
                </li>
                <li>
                    <input type="text"  readonly>
                </li>
                <li>
                    <p>元</p>
                </li>
            </ul>
            <ul>
                <li>
                    <p>
                         新的最后的还款期
                     </p>
                </li>
                <li>
                    <input type="text"  readonly>
                </li>
                <li>
                    <p>元</p>
                </li>
            </ul>
            <ul>
                <li>
                    <p>
                         计算结果提示
                     </p>
                </li>
                <li>
                    <input type="text"  readonly>
                </li>
                <li>
                    <p>元</p>
                </li>
            </ul>
        </div>
        <div class="repaying_Ltip">
            <p>
                提示：
            </p>
            <p>
                不同银行针对提前还款的要求不同，部分银行会授权违约金，具体需参考合同上的约定。
            </p>
        </div>
    </div>
</template>


<script>
import { Checklist } from 'vux'
export default {
    components:{
       Checklist, 
    },
    data(){
        return{
           commonList: [ '一次提前还清', '部分提前还款' ], 
           commonList1:['缩短还款年限，月还款额基本不变','减少月还款额，还款期不变'],
           radioValue:['一次提前还清'],
           radioValueT:['缩短还款年限，月还款额基本不变']
        }
    },
    methods:{
        change (val, label) {
      console.log('change', val, label)
         },
    }
}
</script>

<style>
    .repaying_text p{
        font-size: 0.24rem !important;
    }
    .repaying_text .weui-cells{
        background:none;
    }
    .repaying_text .weui-cells:before,.repaying_text .weui-cells:after,.repaying_text .weui-cell:before{
        border: none;
    }
    .repaying_text .weui-cell{
        padding:0.01rem 0;
    }
    .repaying_text .weui-cells_checkbox .weui-icon-checked:before{
        font-size: 0.4rem;
        margin-bottom: 0.05rem
    }
</style>

